<script setup>
import { ref } from 'vue'
import { NButton, NTable, NTr, NTd } from 'naive-ui'
// 商品数据
const products = ref([
  { id: 1, name: '商品A', price: 100 ,count: 20 ,from: '中国',type: 'food'},
  { id: 2, name: '商品B', price: 200 ,count: 30 ,from: '美国',type: 'usage'},
  { id: 3, name: '商品C', price: 300 ,count: 50 ,from: '日本',type: 'once'},
  { id: 4, name: '商品D', price: 400 ,count: 10 ,from: '韩国',type: 'water'},
])

// 控制列表显示状态
const showProducts = ref(false)

// 切换显示状态的方法
const toggleProducts = () => {
  showProducts.value = !showProducts.value
}
</script>

<template>
  <!-- 按钮绑定点击事件 -->
  <n-button @click="toggleProducts">
    {{ showProducts ? '隐藏商品列表' : '显示商品列表' }}
  </n-button>
  <br>
  <!-- 商品列表，使用v-if控制显示 -->
  <div v-if="showProducts">
    <n-table class="table1">
      <n-thead>
        <n-tr>
          <n-th>商品编号  </n-th>
          <n-th>商品名称  </n-th>
          <n-th>商品价格  </n-th>
          <n-th>商品数量  </n-th>
          <n-th>商品产地  </n-th>
          <n-th>商品类型  </n-th>
          </n-tr>
          </n-thead>
    </n-table>
    <n-table class="table2">
      <tbody>
      <!-- 使用v-for遍历商品数据 -->
      <n-tr v-for="product in products" :key="product.id">
        <n-td>{{ product.id }}</n-td>
        <n-td>{{ product.name }}</n-td>
        <n-td>¥{{ product.price }}</n-td>
        <n-td>{{ product.count }}</n-td>
        <n-td>{{ product.from}}</n-td>
        <n-td>{{ product.type}}</n-td>
      </n-tr>
      </tbody>
    </n-table>
    <br>
  </div>
</template>

<style scoped>
.table1{
  width: 100%;
}
.table2 {
  width: 100%;
}
</style>
